<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Bootstrap v3.3.4 核心 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery.min.js"></script>
    <!-- Bootstrap v3.3.4 核心 JavaScript 文件 -->
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/sqh_style_v2.0.css">
    <script src="../js/sqh_js_v2.0.js"></script>
    <title>选择陵园</title>
    <style>
        #rightContent table tr{
            cursor: pointer;
        }
        #rightContent table tr.active{
            color: #4996f6;
        }
        #rightContent table tr.active span.visibility_hidden{
            visibility:visible;
        }
    </style>
</head>
<body class="">

<div class="container-fluid bg_232323 color_fff padding_top_10 padding_bottom_10">
    <a href="http://www.baidu.com">
        <div class=" col-xs-2">
            <span class="icon iconfont color_fff">&#xe608;</span>
        </div>
    </a>
    <div class="col-xs-8 text-center">
        <span class="font_18"  role="button">选择陵园</span>
    </div>
    <div class="col-xs-2">
        <div class="col-xs-2 text-right">
        </div>
    </div>
</div>

<div class="relative">
    <style>
        #leftContent table tr{
            cursor: pointer;
        }

        #leftContent table tr.active{
            background: #f7f7f7;
        }
    </style>
    <!--   左侧内容  -->
    <div class="float_left width_40" id="leftContent">
        <table class="table table-bordered">
            <tr class="active">
                <td>全部</td>
            </tr>
            <tr>
                <td>顺义</td>
            </tr>
            <tr>
                <td>昌平</td>
            </tr>
            <tr>
                <td>大兴</td>
            </tr>
        </table>
    </div>

    <!--   右侧内容  -->
    <div class="float_left width_60 bg_f7f7f7" id="rightContent" >
        <table class="table table-bordered">
            <tr class="active">
                <td>
                    <span class="icon iconfont visibility_hidden">&#xe60e;</span>
                    安灵园
                </td>
            </tr>
            <tr>
                <td>
                    <span class="icon iconfont visibility_hidden">&#xe60e;</span>
                    极乐园
                </td>
            </tr>
            <tr>
                <td>
                    <span class="icon iconfont visibility_hidden">&#xe60e;</span>
                    八宝山革命公墓
                </td>
            </tr>
            <tr>
                <td>
                    <span class="icon iconfont visibility_hidden">&#xe60e;</span>
                    极乐园
                </td>
            </tr>
        </table>
    </div>
    <!--   画一条竖线  -->
    <div class="fixed" style="border-left: 1px solid #ddd;top:48px;left: 40%;height: 100%"></div>
</div>

</body>

<script>
$(function(){
    initPage();
    resetLeftEvent();
    resetRightEvent();
});
    //让页面左右两侧的div最小高度
    function initPage(){
        $("#leftContent").css("min-height",(getScreenHeight()-48)+"px");
        $("#rightContent").css("min-height",(getScreenHeight()-48)+"px");
    }

    function resetLeftEvent(){
        var $table = $("#leftContent table");
        var $tr = $("#leftContent table tr");
        $tr.on("click",function(){
            $tr.removeClass("active");
            $(this).addClass("active");
        });
    }

    function resetRightEvent(){

        var $table = $("#rightContent table");
        var $tr = $("#rightContent table tr");
        $tr.on("click",function(){
            $tr.removeClass("active");
            $(this).addClass("active");
        });
    }

</script>

</html>
